<template>
    <div>
      <navigation-bar></navigation-bar>
      <search-view :cities="cities"></search-view>
      <list :hotcitys="hotcitys" :cities="cities" :letter="letter"></list>
      <list-title
        :cities="cities"
        @change="handleChange"
      ></list-title>
    </div>
</template>

<script>
import NavigationBar from './components/NavigationBar.vue'
import SearchView from './components/SearchView.vue'
import List from './components/List.vue'
import ListTitle from './components/ListTitle.vue'
import cityData from '../../../static/textData/city.json'
export default {
  name: 'City',
  components: {
    NavigationBar,
    SearchView,
    List,
    ListTitle
  },
  data () {
    return {
      hotcitys: [],
      cities: {},
      letter: ''
    }
  },
  mounted () {
    if (cityData.ret && cityData.data) {
      this.hotcitys = cityData.data.hotCities
      this.cities = cityData.data.cities
    }
  },
  methods: {
    handleChange (res) {
      this.letter = res
    }
  }
}
</script>

<style>
</style>
